<template>
  <div id="gaodeMap">
    <div ref="chuangti" class="chuangtiStyle">
      <div class="chuangtiTop">
        <div class="compayName">{{ infoWindowData.title }}</div>
      </div>
    </div>
    <div class="headerTitle">一厂多租大屏</div>
    <div class="backBtn" @click="backBtn"></div>
    <div class="content">
      <div class="factoryBox">
        <div class="factoryNumTitle">厂房数</div>
        <div class="factoryDetail" @click="chooseFactoryAll">查看详情</div>
        <div class="pic">
          <img
            @click="chooseFactoryAll"
            src="@/assets/rentMoreFactory/组 48239@1x.png"
            alt=""
          />
          <div class="picTxt" style="">厂房总数</div>
        </div>
        <div class="factoryNum">{{ totalObject.totalFactoryCount }}</div>
      </div>
      <div class="rentDesc">
        <div class="rentDescTitle">租赁情况</div>
        <div class="rentDetail">查看详情</div>
        <div class="rentPicBox">
          <div class="rentPic1">
            <img
              @click="chooseRent1"
              src="@/assets/rentMoreFactory/组 48257@1x.png"
              alt=""
            />
            <div class="rentDescNum">{{ totalObject.leasedCompanyCount }}</div>
          </div>
          <div class="rentPic2">
            <img
              @click="chooseRent2"
              src="@/assets/rentMoreFactory/组 48256@1x.png"
              alt=""
            />
            <div class="rentDescNum">
              {{ totalObject.unleasedFactoryCount }}
            </div>
          </div>
        </div>
        <div class="rentBox1">
          <img
            @click="chooseRent3"
            src="@/assets/rentMoreFactory/组 48258@1x.png"
            alt=""
          />
          <div class="rentDescNum">
            {{ totalObject.leasedFactoryCount }}
          </div>
        </div>
      </div>
      <div class="agreementQuantity">
        <div class="agreementQuantityTitle">协议数量</div>
        <div class="agreementQuantityNum">
          {{ totalObject.safetyManagementAgreementCount }}
        </div>
      </div>
      <div class="rentTransaction">
        <div class="agreementQuantityTitle">厂房出租事项数</div>
        <div class="agreementQuantityNum">
          <div class="rentDescNum1">{{ totalObject.leaseToDoItemCount }}</div>
          <div class="rentDescNum2">
            {{ totalObject.completedToDoItemCount }}
          </div>
        </div>
      </div>
    </div>
    <div class="areaSelect" @mouseenter="mouseClose">
      <div
        @click="chooseSelectCity('330500', null)"
        :class="['allCityM', { allCityMS: areaChoose === '330500' }]"
      >
        全市总览
      </div>
      <div
        @click="chooseSelectCity('330503', '南浔区')"
        :class="['allCity', { allCityS: areaChoose === '330503' }]"
      >
        南浔区
      </div>
      <div
        @click="chooseSelectCity('330502', '吴兴区')"
        :class="['allCity', { allCityS: areaChoose === '330502' }]"
      >
        吴兴区
      </div>
      <div
        @click="chooseSelectCity('330504', '南太湖新区')"
        :class="['allCityL', { allCityLS: areaChoose === '330504' }]"
      >
        南太湖新区
      </div>
      <div
        @click="chooseSelectCity('330523', '安吉县')"
        :class="['allCity', { allCityS: areaChoose === '330523' }]"
      >
        安吉县
      </div>
      <div
        @click="chooseSelectCity('330521', '德清县')"
        :class="['allCity', { allCityS: areaChoose === '330521' }]"
      >
        德清县
      </div>
      <div
        @click="chooseSelectCity('330522', '长兴县')"
        :class="['allCity', { allCityS: areaChoose === '330522' }]"
      >
        长兴县
      </div>
      <div
        @click="chooseSelectCity('长合区', '长合区')"
        :class="['allCity', { allCityS: areaChoose === '长合区' }]"
      >
        长合区
      </div>
    </div>
    <div class="multiSelect">
      <div class="leftBOX">
        <div class="selectInp">
          <div v-if="!checkedStreetList.length">请选择街道</div>
          <div class="selectItem" v-if="checkedStreetList.length > 0">
            <div class="street">{{ checkedStreetList[0].name }}</div>
            <div class="errorX" @click="deleteStreetList(0)">X</div>
          </div>
          <div class="selectItem" v-if="checkedStreetList.length > 1">
            <div class="street">{{ checkedStreetList[1].name }}</div>
            <div class="errorX" @click="deleteStreetList(1)">X</div>
          </div>
          <div class="selectItemM" v-if="checkedStreetList.length > 2">
            <div class="streetM">+{{ checkedStreetList.length - 2 }}...</div>
          </div>
          <div class="arrowDown" @click="showLeftBox = !showLeftBox">
            <i class="el-icon-caret-bottom"></i>
          </div>
        </div>
        <div class="bottomBox">
          <div class="multiStreetR">
            <div
              v-for="(item, index) in leftStreetList"
              :key="index"
              :class="['streetItem']"
              @click="chooseStreetList(index)"
            >
              <div :class="['rightBox', { streetItemChecked: item.checked }]">
                <div :class="['name']">
                  {{ item.name }}
                </div>
                <div :class="{ right: !item.checked }">
                  <img
                    class="checkRight"
                    src="@/assets/overall/组 48116@1x.png"
                    mode="scaleToFill"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footerNav"></div>
    <div class="sheBeiZuo1dialogVisible" v-if="isDialogShow === 'device'">
      <div class="topDiv">
        <div class="title">出租方</div>
        <div class="closeX">
          <img
            src="@/assets/overall/组 39@1x.png"
            alt=""
            @click="closeDialogShow"
          />
        </div>
      </div>
      <div class="basicBox">
        <div class="basicTitle">基本信息</div>
        <div class="basicItem">
          <div class="left">
            <div class="name">企业名称</div>
            <div class="value">{{ basicInfo.enterpriseName }}</div>
          </div>
          <div class="left">
            <div class="name">出租单位</div>
            <div class="value">{{ basicInfo.rentOutCompanyName }}</div>
          </div>
        </div>
        <div class="basicItemL">
          <div class="left">
            <div class="name">统一社会信用代码</div>
            <div class="value">{{ basicInfo.unifiedCreditCode }}</div>
          </div>
        </div>
        <div class="basicItem">
          <div class="left">
            <div class="name">园区类型</div>
            <div class="value">{{ basicInfo.parkType }}</div>
          </div>
          <div class="left">
            <div class="name">登录账号</div>
            <div class="value">{{ basicInfo.loginAccount }}</div>
          </div>
        </div>
        <div class="basicItem">
          <div class="left">
            <div class="name">行政区划</div>
            <div class="value" :title="basicInfo.administrativeDivision">
              {{ basicInfo.administrativeDivision }}
            </div>
          </div>
          <div class="left">
            <div class="name">详细地址</div>
            <div class="value" :title="basicInfo.administrativeDivision">
              {{ basicInfo.administrativeDivision }}
            </div>
          </div>
        </div>
        <div class="basicItem">
          <div class="left">
            <div class="name">法定代表人</div>
            <div class="value">{{ basicInfo.legalRepresentative }}</div>
          </div>
          <div class="left">
            <div class="name">联系方式</div>
            <div class="value">{{ basicInfo.contactPhone }}</div>
          </div>
        </div>
        <div class="basicItem">
          <div class="left">
            <div class="name">安全管理协议家数</div>
            <div class="value">{{ basicInfo.rentedCompanyCount }}</div>
          </div>
        </div>
      </div>
      <div class="table">
        <div class="tableTitle">承租方列表</div>
        <el-table
          :data="tableData"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '32px',
          }"
          :header-cell-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            label="序号"
            width="50"
            type="index"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="tenantCompanyName"
            label="承租单位"
            width="300"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="establishmentDate"
            label="成立日期"
            width="200"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="legalRepresentative"
            label="法定代表人"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="contactInformation"
            label="联系方式"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="enterpriseStatus"
            label="企业状态"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column align="center" label="操作" width="93px">
            <template slot-scope="scope">
              <div @click="seeDetail(scope.row)" type="text" size="small">
                查看
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="enterprise1dialogVisible" v-if="isDialogShow === 'rent1'">
      <div class="closeX">
        <img
          src="@/assets/overall/组 39@1x.png"
          alt=""
          @click="closeDialogShow"
        />
      </div>
      <div class="title">已出租厂房数</div>
      <div class="table">
        <el-table
          :data="tableDataRent1"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '32px',
          }"
          :header-cell-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="enterpriseName"
            label="企业名称"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="rentOutCompanyName"
            label="出租园区名称"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="administrativeDivision"
            label="行政区划"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="unifiedCreditCode"
            label="统一信用代码"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="legalRepresentative"
            label="法定代表人"
            width="100"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="contactPhone"
            label="联系电话"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page.sync="paramsRent1.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemRent1"
          @current-change="currentRent1"
        />
      </div>
    </div>
    <div class="enterprise1dialogVisible" v-if="isDialogShow === 'rent2'">
      <div class="closeX">
        <img
          src="@/assets/overall/组 39@1x.png"
          alt=""
          @click="closeDialogShow"
        />
      </div>
      <div class="title">未出租的厂房数</div>
      <div class="table">
        <el-table
          :data="tableDataRent2"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '32px',
          }"
          :header-cell-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="enterpriseName"
            label="企业名称"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="rentOutCompanyName"
            label="出租园区名称"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="administrativeDivision"
            label="行政区划"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="unifiedCreditCode"
            label="统一信用代码"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="legalRepresentative"
            label="法定代表人"
            width="100"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="contactPhone"
            label="联系电话"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page.sync="paramsRent2.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemRent2"
          @current-change="currentRent2"
        />
      </div>
    </div>
    <div class="enterprise1dialogVisible" v-if="isDialogShow === 'rent3'">
      <div class="closeX">
        <img
          src="@/assets/overall/组 39@1x.png"
          alt=""
          @click="closeDialogShow"
        />
      </div>
      <div class="title">承租企业数</div>
      <div class="table">
        <el-table
          :data="tableDataRent3"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '32px',
          }"
          :header-cell-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="parkName"
            label="承租单位名称"
            width="240"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="administrativeDivision"
            label="行政区划"
            width="240"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="unifiedCreditCode"
            label="统一信用代码"
            width="200"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="legalRepresentative"
            label="法定代表人"
            width="100"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="contactInformation"
            label="联系电话"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page.sync="paramsRent3.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemRent3"
          @current-change="currentRent3"
        />
      </div>
    </div>
    <div class="enterprise1dialogVisible" v-if="isDialogShow === 'factoryAll'">
      <div class="closeX">
        <img
          src="@/assets/overall/组 39@1x.png"
          alt=""
          @click="closeDialogShow"
        />
      </div>
      <div class="title">厂房总数</div>
      <div class="table">
        <el-table
          :data="tableDataRent4"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '32px',
          }"
          :header-cell-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          @row-click="seeColum"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="enterpriseName"
            label="企业名称"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="rentOutCompanyName"
            label="出租园区名称"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="administrativeDivision"
            label="行政区划"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="unifiedCreditCode"
            label="统一信用代码"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="legalRepresentative"
            label="法定代表人"
            width="100"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="contactPhone"
            label="联系电话"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page.sync="paramsRent4.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemRent4"
          @current-change="currentRent4"
        />
      </div>
    </div>
    <div
      class="sheBeiZuo1dialogVisible1"
      v-if="isDialogShow === 'deviceDetail'"
    >
      <div class="topDiv">
        <div class="title">承租方</div>
        <div class="closeX">
          <img
            src="@/assets/overall/组 39@1x.png"
            alt=""
            @click="closeDialogShow"
          />
        </div>
      </div>
      <div class="basicBox">
        <div class="basicTitle">基本信息</div>
        <div class="basicItem">
          <div class="left">
            <div class="name">承租单位</div>
            <div class="value">{{ basicInfoDetail.tenantCompanyName }}</div>
          </div>
          <div class="left">
            <div class="name">统一社会信用代码</div>
            <div class="value">{{ basicInfoDetail.unifiedCreditCode }}</div>
          </div>
        </div>
        <div class="basicItem">
          <div class="left">
            <div class="name">园区类型</div>
            <div class="value">{{ basicInfoDetail.parkType }}</div>
          </div>
          <div class="left">
            <div class="name">登录账号</div>
            <div class="value">{{ basicInfoDetail.loginAccount }}</div>
          </div>
        </div>
        <div class="basicItem">
          <div class="left">
            <div class="name">行政区划</div>
            <div class="value" :title="basicInfoDetail.administrativeDivision">
              {{ basicInfoDetail.administrativeDivision }}
            </div>
          </div>
          <div class="left">
            <div class="name">详细地址</div>
            <div class="value" :title="basicInfoDetail.administrativeDivision">
              {{ basicInfoDetail.administrativeDivision }}
            </div>
          </div>
        </div>
        <div class="basicItem">
          <div class="left">
            <div class="name">法定代表人</div>
            <div class="value">{{ basicInfoDetail.legalRepresentative }}</div>
          </div>
          <div class="left">
            <div class="name">联系方式</div>
            <div class="value">{{ basicInfoDetail.contactPhone }}</div>
          </div>
        </div>
        <!-- <div class="basicItem">
          <div class="left">
            <div class="name">安全管理协议家数</div>
            <div class="value">{{ basicInfoDetail.parkType }}</div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import MapIcon from '@/assets/rentMoreFactory/组 48223@1x.png'
import {
  getParkTenantSum,
  getParkList,
  getTenantCompanyByPark,
  getLeasedCompanyList,
  getUnleasedFactoryList,
  getLeasedFactoryList,
  getParkListPage,
} from '@/api/rentMoreFactory'
import { areaDict } from '@/api/index'

export default {
  name: 'changPage',
  props: {},
  components: {},
  data() {
    return {
      gaodeMap: null,
      markerData: [],
      infoWindowData: {
        title: '',
      },
      marker: null,
      polygon: null,
      district: null,
      areaChoose: '330500',
      showLeftBox: true,
      leftStreetList: [],
      isDialogShow: '',
      tableData: [],
      allAreaDict: [],
      totalObject: {
        totalFactoryCount: '-',
        leasedFactoryCount: '-',
        unleasedFactoryCount: '-',
        safetyManagementAgreementCount: '-',
        leaseToDoItemCount: '-',
        completedToDoItemCount: '-',
        leasedCompanyCount: '-',
      },
      areaChooseName: null,
      basicInfo: {
        enterpriseName: '-',
        rentOutCompanyName: '-',
        unifiedCreditCode: '-',
        parkType: '-',
        loginAccount: '-',
        administrativeDivision: '-',
        legalRepresentative: '-',
        contactPhone: '-',
        rentedCompanyCount: '-',
      },
      tableDataRent1: [],
      paramsRent1: {
        pageNum: 1,
        pageSize: 10,
      },
      totalItemRent1: null,
      tableDataRent2: [],
      paramsRent2: {
        pageNum: 1,
        pageSize: 10,
      },
      totalItemRent2: null,
      tableDataRent3: [],
      paramsRent3: {
        pageNum: 1,
        pageSize: 10,
      },
      totalItemRent3: null,
      basicInfoDetail: {},
      tableDataRent4: [],
      paramsRent4: {
        pageNum: 1,
        pageSize: 10,
      },
      totalItemRent4: null,
    }
  },
  created() {
    this.areaDict()
    this.getParkTenantSum({
      areaCode: null,
      townCodeList: null,
    })
    this.getParkList({
      areaCode: null,
      townCodeList: null,
    })
  },
  methods: {
    backBtn() {
      this.$router.push('/index')
    },
    async chooseSelectCity(e, areaChooseName) {
      this.areaChoose = e
      this.areaChooseName = areaChooseName
      this.checkedStreetList.forEach((item) => (item.checked = false))

      this.filterListFunction()
      if (e !== '南太湖新区' && e !== '长合区' && e !== '330500') {
        const findList = this.allAreaDict.find((item) => item.areaCode === e)
        this.leftStreetList = findList?.platformAreaCodeVoList.map((item) => {
          return {
            name: item.areaName,
            areaCode: item.areaCode,
            checked: false,
          }
        })
      }
      if (this.polygon) {
        this.gaodeMap.remove(this.polygon) //清除上次结果
        this.polygon.setMap(null)
      }
      this.districtSearch(e)
    },
    mouseClose() {},
    deleteStreetList(e) {
      this.checkedStreetList[e].checked = false
    },
    chooseStreetList(index) {
      this.leftStreetList[index].checked = !this.leftStreetList[index].checked
      this.filterListFunction()
    },
    initGaoDeMap() {
      // 高德地图key的密钥
      window._AMapSecurityConfig = {
        securityJsCode: '559cdc92fb08026896143b094e257b8a', // 密钥
      }
      AMapLoader.load({
        key: '557e9cac70e929f2a3837a266c23883a', // 替换为你的高德地图API Key
        version: '2.0',
        plugins: ['AMap.DistrictSearch'],
      }).then((AMap) => {
        this.gaodeMap = new AMap.Map('gaodeMap', {
          mapStyle: 'amap://styles/blue', //设置地图的显示样式
          center: [120.1555, 30.9],
          viewMode: '2D',
          labelzIndex: 130,
          pitch: 40,
          zoom: 10,
          zooms: [10, 20], //地图显示的缩放级别范围, 默认为 [2, 20] ，
          // rotation: 20,//初始地图顺时针旋转的角度
          // mapStyle: 'amap://styles/dark'
        })
        this.districtSearch(this.areaChoose)
      })
    },
    //2.添加点标记
    districtSearch(areaChoose) {
      if (!this.district) {
        // 创建行政区划查询对象
        this.district = new AMap.DistrictSearch({
          extensions: 'all',
          level: 'city', //level (string) 关键字对应的行政区级别或商圈，可选值： country：国家 province：省/直辖市 city：市 district：区/县 biz_area：商圈
          //   subdistrict: 0
        })
      }
      // 查询并显示
      this.district.search(areaChoose, (status, result) => {
        if (status === 'complete') {
          var geojosn = result.districtList[0]?.boundaries[0] //该县拿到数据有两组，正常获取下标0
          this.polygon = new AMap.Polygon({
            path: geojosn, //多边形路径
            strokeColor: '#00d5d8', //线条颜色
            strokeWeight: 2, //线条宽度
            fillColor: 'rgba(0, 188, 193,0)', //多边形填充颜色0, 188, 193
            fillOpacity: 0.1, //填充透明度
          })
          // 添加多边形到地图上
          this.polygon.setMap(this.gaodeMap)
          // 调整地图视野到多边形所覆盖的区域
          this.gaodeMap.setFitView(this.polygon)
          if (areaChoose === '330500') {
            setTimeout(() => {
              this.gaodeMap.setZoom(10)
            }, 100) // 使用 setTimeout 以确保视野调整已完成
          } else {
            setTimeout(() => {
              this.gaodeMap.setZoom(11)
            }, 100) // 使用 setTimeout 以确保视野调整已完成
          }
          this.addMarker()
        }
      })
    },
    addMarker() {
      let arr = []
      if (!this.markers) {
        this.markers = []
      }
      // 清除之前的标记点
      this.markers.forEach((marker) => {
        this.gaodeMap.remove(marker)
      })
      this.markers = []
      this.markerData.forEach((item) => {
        let marker = new AMap.Marker({
          map: this.gaodeMap,
          icon: item.icon, //点标记图片路径
          position: item.position, //位置
        })
        // 存储标记点
        this.markers.push(marker)
        arr.push(Object.assign(item, { mapId: marker._amap_id }))
        AMap.Event.addListener(marker, 'mouseover', () => {
          this.$refs.chuangti.style.display = 'block'
          this.createInfoWindow(marker, arr)
        })
        AMap.Event.addListener(marker, 'click', () => {
          this.isDialogShow = 'device'
          this.basicInfo = this.infoWindowData
          this.getTenantCompanyByPark(this.infoWindowData.rentOutCompanyName)
        })
        // 鼠标移出
        AMap.Event.addListener(marker, 'mouseout', () => {
          this.closeInfoWindow()
          this.$refs.chuangti.style.display = 'none'
        })
      })
    },
    //4.构建自定义窗体并打开
    createInfoWindow(marker, arr) {
      let arrNew = arr.filter((x) => x.mapId == marker._amap_id)
      this.infoWindowData = arrNew && arrNew[0]
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.$refs.chuangti,
        offset: new AMap.Pixel(60, 0),
      })
      infoWindow.open(this.gaodeMap, marker.getPosition())
    },
    //关闭窗体
    closeInfoWindow() {
      this.gaodeMap.clearInfoWindow()
    },
    closeDialogShow() {
      this.isDialogShow = ''
      this.paramsRent1 = {
        pageNum: 1,
        pageSize: 10,
      }
      this.paramsRent2 = {
        pageNum: 1,
        pageSize: 10,
      }
      this.paramsRent3 = {
        pageNum: 1,
        pageSize: 10,
      }
      this.paramsRent4 = {
        pageNum: 1,
        pageSize: 10,
      }
    },
    seeDetail(row) {
      console.log(row)
      this.isDialogShow = 'deviceDetail'
      this.basicInfoDetail = row
    },
    async getParkTenantSum(obj) {
      const res = await getParkTenantSum(obj)
      this.totalObject = res.data
    },
    async areaDict() {
      const res = await areaDict()
      this.allAreaDict = res.data
      const mergeList = res.data.reduce((acc, obj) => {
        return acc.concat(obj.platformAreaCodeVoList)
      }, [])
      this.leftStreetList = mergeList.map((item) => {
        return {
          name: item.areaName,
          areaCode: item.areaCode,
          checked: false,
        }
      })
    },
    filterListFunction() {
      this.closeDialogShow()
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.name)
      this.getParkTenantSum({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
      })
      this.getParkList({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
      })
      this.getLeasedCompanyList({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: 1,
        pageSize: 10,
      })
      this.getUnleasedFactoryList({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: 1,
        pageSize: 10,
      })
      this.getLeasedFactoryList({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: 1,
        pageSize: 10,
      })
      this.getParkListPage({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: 1,
        pageSize: 10,
      })
    },
    async getParkList(obj) {
      const res = await getParkList(obj)
      const list = res.data.map((item) => {
        return {
          ...item,
          title: item.enterpriseName,
          icon: MapIcon,
          position: [item.longitude, item.latitude],
        }
      })
      this.markerData = list
      this.addMarker()
    },
    async getTenantCompanyByPark(parkName) {
      const res = await getTenantCompanyByPark({ parkName })
      this.tableData = res.data.slice(0, 8)
    },
    currentRent1(pageNum) {
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.name)
      this.getLeasedCompanyList({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: pageNum,
        pageSize: 10,
      })
    },
    chooseRent1() {
      this.closeDialogShow()
      this.isDialogShow = 'rent1'
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.name)
      this.getLeasedCompanyList({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: 1,
        pageSize: 10,
      })
    },
    chooseRent2() {
      this.closeDialogShow()
      this.isDialogShow = 'rent2'
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.name)
      this.getUnleasedFactoryList({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: 1,
        pageSize: 10,
      })
    },
    currentRent2(pageNum) {
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.name)
      this.getUnleasedFactoryList({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: pageNum,
        pageSize: 10,
      })
    },
    chooseRent3() {
      this.closeDialogShow()
      this.isDialogShow = 'rent3'
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.name)
      this.getLeasedFactoryList({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: 1,
        pageSize: 10,
      })
    },
    currentRent3(pageNum) {
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.name)
      this.getLeasedFactoryList({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: pageNum,
        pageSize: 10,
      })
    },
    async getLeasedCompanyList(obj) {
      const res = await getLeasedCompanyList(obj)
      this.totalItemRent1 = res.data.total
      this.tableDataRent1 = res.data.list
    },
    async getUnleasedFactoryList(obj) {
      const res = await getUnleasedFactoryList(obj)
      this.totalItemRent2 = res.data.total
      this.tableDataRent2 = res.data.list
    },
    async getLeasedFactoryList(obj) {
      const res = await getLeasedFactoryList(obj)
      this.totalItemRent3 = res.data.total
      this.tableDataRent3 = res.data.list
    },
    chooseFactoryAll() {
      this.closeDialogShow()
      this.isDialogShow = 'factoryAll'
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.name)
      this.getParkListPage({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: 1,
        pageSize: 10,
      })
    },
    currentRent4(pageNum) {
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.name)
      this.getParkListPage({
        areaCode: this.areaChooseName == null ? null : this.areaChooseName,
        townCodeList: renderL.length ? renderL : null,
        pageNum: pageNum,
        pageSize: 10,
      })
    },
    async getParkListPage(obj) {
      const res = await getParkListPage(obj)
      this.totalItemRent4 = res.data.total
      this.tableDataRent4 = res.data.list
    },
    seeColum(row) {
      this.basicInfo = row
      this.getTenantCompanyByPark(row.rentOutCompanyName)
      this.isDialogShow = 'device'
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initGaoDeMap()
    })
  },
  watch: {},
  computed: {
    checkedStreetList() {
      const list = this.leftStreetList?.filter((item) => item.checked)
      return list ? list : []
    },
  },
  filters: {},
}
</script>

<style scoped lang="scss">
#gaodeMap {
  width: 1920px;
  height: 1080px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  position: absolute;
}
:deep() .amap-logo {
  display: none !important;
}
:deep() .amap-copyright {
  display: none !important;
}
.chuangtiStyle {
  width: 224px;
  height: 31px;
  background-image: url('@/assets/rentMoreFactory/矩形 28287@1x.png');
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  box-sizing: border-box;
  line-height: 31px;
  display: none;
  .chuangtiTop {
    display: flex;
    .compayName {
      line-height: 31px;
      height: 31px;
      width: 224px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-family: 思源黑体;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      color: #ffffff;
      // margin-right: 15px;
    }
  }
}
.backBtn {
  position: absolute;
  top: 8px;
  left: 19px;
  width: 111px;
  height: 36px;
  background-image: url('@/assets/rentMoreFactory/Btn-Back@1x.png');
  z-index: 999;
  cursor: pointer;
}
.headerTitle {
  z-index: 99;
  background-image: url('@/assets/common/overall_head.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  box-sizing: border-box;
  width: 1920px;
  height: 102px;
  text-align: center;
  padding-top: 9px;
  font-size: 40px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}
.content {
  z-index: 99;
  position: relative;
  .factoryBox {
    background-image: url('@/assets/rentMoreFactory/LEFT_01@1x.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 420px;
    height: 282px;
    position: absolute;
    left: 11px;
    top: 72px;
    position: relative;
    .factoryDetail {
      position: absolute;
      right: 45px;
      top: 5px;
      color: #5de1d4;
      font-size: 12px;
      cursor: pointer;
    }
    .pic {
      position: absolute;
      left: 161px;

      top: 60px;
      img {
        margin-bottom: 10px;
        cursor: pointer;
      }
      .picTxt {
        text-align: center;
        color: #1affe8;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .factoryNumTitle {
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      position: absolute;
      left: 35px;
      top: 7px;
    }
    .factoryNum {
      color: #fff;
      font-size: 32px;
      font-weight: bold;
      position: absolute;
      left: 0px;
      top: 220px;
      width: 420px;
      text-align: center;
    }
  }
  .rentDesc {
    background-image: url('@/assets/rentMoreFactory/组 48053@1x.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 420px;
    height: 672px;
    position: absolute;
    left: 11px;
    top: 364px;
    .rentDetail {
      position: absolute;
      right: 45px;
      top: 3px;
      color: #5de1d4;
      font-size: 12px;
    }
    .rentPicBox {
      position: absolute;
      left: 0;
      top: 143px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      img {
        cursor: pointer;
      }
      .rentPic1 {
        width: 109px;
        height: 142px;
      }
      .rentPic2 {
        width: 109px;
        height: 142px;
      }
    }
    .rentBox1 {
      position: absolute;
      left: 0;
      top: 408px;
      text-align: center;
      width: 100%;
      img {
        cursor: pointer;
      }
    }
    .rentDescTitle {
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      position: absolute;
      left: 35px;
      top: 7px;
    }
    .rentDescNum {
      color: #fff;
      font-size: 32px;
      font-weight: bold;
      text-align: center;
    }
  }
  .agreementQuantity {
    background-image: url('@/assets/rentMoreFactory/组 48246@1x.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 420px;
    height: 282px;
    position: absolute;
    right: 12px;
    top: 72px;
    .agreementQuantityTitle {
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      position: absolute;
      left: 35px;
      top: 3px;
    }
    .agreementQuantityNum {
      color: #fff;
      font-size: 32px;
      font-weight: bold;
      position: absolute;
      left: 0px;
      top: 235px;
      width: 420px;
      text-align: center;
    }
  }
  .rentTransaction {
    background-image: url('@/assets/rentMoreFactory/组 48243@1x.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 420px;
    height: 672px;
    position: absolute;
    right: 11px;
    top: 363px;
    .agreementQuantityTitle {
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      position: absolute;
      left: 20px;
      top: 7px;
    }
    .agreementQuantityNum {
      box-sizing: border-box;
      color: #fff;
      font-size: 32px;
      font-weight: bold;
      position: absolute;
      left: 0px;
      top: 388px;
      width: 420px;
      text-align: center;
      display: flex;
      justify-content: space-around;
      padding: 0 20px;
    }
  }
}
.areaSelect {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 110px;
  z-index: 999;
  color: #2fc4b2;
  display: flex;
  cursor: pointer;
  .allCity {
    background-image: url('@/assets/overall/矩形 287@1x.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }
  .allCityS {
    width: 80px;
    color: #2efffe;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('@/assets/overall/组 119@1x.png');
  }
  .allCityM {
    width: 96px;
    text-align: center;
    line-height: 30px;
    background-image: url('@/assets/overall/矩形 263@1x.png');
  }
  .allCityMS {
    color: #2efffe;
    width: 96px;
    background-image: url('@/assets/overall/矩形 293@1x.png');
  }
  .allCityL {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 112px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-image: url('@/assets/overall/矩形 452@2x.png');
  }
  .allCityLS {
    color: #2efffe;
    width: 112px;
    background-image: url('@/assets/overall/矩形 453@2x.png');
  }
}
.multiSelect {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  z-index: 999;
  color: #2efffe;
  .leftBOX {
    position: relative;
    .selectInp {
      background-image: url('@/assets/rentMoreFactory/组 48247@1x.png');
      width: 687px;
      height: 35px;
      background-size: cover;
      background-repeat: no-repeat;
      box-sizing: border-box;
      padding-top: 5px;
      padding-left: 26px;
      display: flex;
      .selectItem {
        width: 192px;
        height: 24px;
        line-height: 24px;
        background-color: #0d4d52;
        color: #5de1d4;
        padding-left: 5px;
        border-radius: 3px;
        display: flex;
        position: relative;
        margin-right: 8px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        .street {
          width: 160px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 8px;
        }
        .errorX {
          position: absolute;
          right: 9px;
          top: 2px;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .selectItemM {
        width: 49px;
        height: 24px;
        line-height: 24px;
        background-color: #0d4d52;
        color: #5de1d4;
        padding-left: 5px;
        border-radius: 3px;
        display: flex;
        position: relative;
        padding: 0 6px;
        .streetM {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .arrowDown {
        position: absolute;
        right: 12px;
        top: 7px;
        color: #2efffe;
        cursor: pointer;
      }
    }
  }
  .leftBOX:hover .bottomBox {
    display: block;
  }
  .bottomBox {
    display: none;
    background-image: url('@/assets/rentMoreFactory/组 48248@1x.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 676px;
    height: 196px;
    transform: translate(10px, 5px);
    .multiStreetR {
      z-index: 999;
      height: 196px;
      background-size: cover;
      background-repeat: no-repeat;
      padding: 10px 6px;
      color: #5de1d4;
      box-sizing: border-box;
      font-weight: 500;
      overflow-y: auto;
      .streetItem {
        height: 24px;
        padding-left: 15px;
        padding-right: 9px;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        .left {
          img {
            width: 16px;
            background-color: none !important;
            height: 16px;
            margin-right: 12px;
          }
        }
        .rightBox {
          padding-right: 10px;
          padding-left: 10px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          .name {
            width: 580px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .right {
          display: none;
        }
      }
      .streetItem:last-child {
        margin: 0;
      }
      .streetItemChecked {
        background-color: #50cabe;
        color: #000;
      }
    }
  }
}
.footerNav {
  z-index: 99;
  background-image: url('@/assets/common/组 48054@1x.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 1920px;
  height: 48px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.sheBeiZuo1dialogVisible {
  z-index: 9999;
  width: 1103px;
  height: 873px;
  background-color: #053a3b;
  background-image: url('@/assets/rentMoreFactory/组 41@1x.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 121px;
  .topDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    .closeX {
      display: flex;
      justify-content: right;
      padding: 10px;
      img {
        cursor: pointer;
      }
    }
    .title {
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      padding-left: 28px;
      .subTitle {
        color: #9e9e9e;
        font-size: 12px;
      }
    }
  }
  .basicBox {
    color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    .basicTitle {
      text-align: center;
      color: #fff;
      font-size: 16px;
      padding-top: 13px;
      padding-bottom: 10px;
      font-weight: bold;
    }
    .basicItem {
      margin-bottom: 15px;
      display: flex;
      .left {
        display: flex;
        margin-right: 40px;
        .name {
          width: 155px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background-color: #053a3b;
          color: #2fc4b2;
        }
        .value {
          width: 355px;
          height: 32px;
          line-height: 32px;
          padding-left: 36px;
          box-sizing: border-box;
          border: 1px solid #053a3b;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .basicItemL {
      margin-bottom: 15px;
      .left {
        display: flex;
        .name {
          width: 155px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background-color: #053a3b;
          color: #2fc4b2;
        }
        .value {
          width: 906px;
          height: 32px;
          line-height: 32px;
          padding-left: 36px;
          box-sizing: border-box;
          border: 1px solid #053a3b;
        }
      }
    }
  }
  .table {
    padding: 0 30px;
    padding-top: 10px;
    .tableTitle {
      text-align: center;
      color: #fff;
      padding-bottom: 10px;
    }
    .el-table .warning-row {
      background-color: transparent;
      background: #022627 !important;
    }
    .el-table::before {
      display: none;
    }
  }
  .footerPage {
    width: 100%;
    text-align: center;
    margin: 10px auto 0;
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #62c1b2 !important; // 进行修改选中项背景和字体
      color: #fff;
    }
  }
  .picBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 44px;
    margin-bottom: -31px;
    box-sizing: border-box;
    img {
      width: 429px;
      height: 214px;
      margin-bottom: 31px;
    }
  }
  ::v-deep .el-table__empty-block {
    background-color: #053a3b !important;
    border: none;
    .el-table__empty-text {
      color: #fff;
    }
  }
}
.sheBeiZuo1dialogVisible1 {
  z-index: 9999;
  width: 1103px;
  height: 349px;
  background-color: #053a3b;
  background-image: url('@/assets/rentMoreFactory/组 48263@1x.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 332px;
  .topDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    .closeX {
      display: flex;
      justify-content: right;
      padding: 10px;
      img {
        cursor: pointer;
      }
    }
    .title {
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      padding-left: 28px;
      .subTitle {
        color: #9e9e9e;
        font-size: 12px;
      }
    }
  }
  .basicBox {
    color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    .basicTitle {
      text-align: center;
      color: #fff;
      font-size: 16px;
      padding-top: 13px;
      padding-bottom: 10px;
      font-weight: bold;
    }
    .basicItem {
      margin-bottom: 15px;
      display: flex;
      .left {
        display: flex;
        margin-right: 40px;
        .name {
          width: 155px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background-color: #053a3b;
          color: #2fc4b2;
        }
        .value {
          width: 355px;
          height: 32px;
          line-height: 32px;
          padding-left: 36px;
          box-sizing: border-box;
          border: 1px solid #053a3b;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .basicItemL {
      margin-bottom: 15px;
      .left {
        display: flex;
        .name {
          width: 155px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background-color: #053a3b;
          color: #2fc4b2;
        }
        .value {
          width: 906px;
          height: 32px;
          line-height: 32px;
          padding-left: 36px;
          box-sizing: border-box;
          border: 1px solid #053a3b;
        }
      }
    }
  }
  .table {
    padding: 0 30px;
    padding-top: 10px;
    .tableTitle {
      text-align: center;
      color: #fff;
      padding-bottom: 10px;
    }
    .el-table .warning-row {
      background-color: transparent;
      background: #022627 !important;
    }
    .el-table::before {
      display: none;
    }
  }
  .footerPage {
    width: 100%;
    text-align: center;
    margin: 10px auto 0;
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #62c1b2 !important; // 进行修改选中项背景和字体
      color: #fff;
    }
  }
  .picBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 44px;
    margin-bottom: -31px;
    box-sizing: border-box;
    img {
      width: 429px;
      height: 214px;
      margin-bottom: 31px;
    }
  }
  ::v-deep .el-table__empty-block {
    background-color: #053a3b !important;
    border: none;
    .el-table__empty-text {
      color: #fff;
    }
  }
}
.enterprise1dialogVisible {
  z-index: 9999;
  width: 960px;
  height: 580px;
  background-image: url('@/assets/overall/矩形 201@1x.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 244px;
  .closeX {
    display: flex;
    justify-content: right;
    padding: 4px;
    img {
      cursor: pointer;
    }
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    padding-left: 30px;
    margin-bottom: 8px;
    .subTitle {
      color: #9e9e9e;
      font-size: 12px;
    }
  }
  .table {
    padding: 0 30px;
    .el-table .warning-row {
      background-color: transparent;
      background: #022627 !important;
    }
    .el-table::before {
      display: none;
    }
  }
  .footerPage {
    width: 100%;
    text-align: center;
    margin: 10px auto 0;

    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #62c1b2 !important; // 进行修改选中项背景和字体
      color: #fff;
    }
  }
  .picBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 44px;
    margin-bottom: -31px;
    box-sizing: border-box;
    img {
      width: 429px;
      height: 214px;
      margin-bottom: 31px;
    }
  }
  ::v-deep .el-table__empty-block {
    background-color: #053a3b !important;
    border: none;
    .el-table__empty-text {
      color: #fff;
    }
  }
}
</style>
